
//使用node.js中的导出语法，向外导出一个webpack的配置对象，最后在npm设置引入

const path = require('path')
//导入node.js中专门操作路径的模块,此处的path代表node的核心模块之一

const HtmlPlugin = require('html-webpack-plugin')
//导入html插件，形成一个构造函数即大写开头的HtmlPlugin

const htmlPlugin = new HtmlPlugin({

//使用构造函数，所以是小写，类似c语言中的结构体
//接受两个参数，template和filename
//其中template表示将要复制的路径，filename表示复制后的路径和命名

    template: './src/index.html',
    filename: './index.html',
})

module.exports = {
    mode: 'development',
    //可选有development(开发)/production(生产)
    //mode值表示开发的不同阶段
    entry: {
        index: './src/js/index.js',
        //loading: './src/js/test.js',
        //打包入口的存放路径
    },
    output: {
        path: path.join(__dirname,'./'),
        //输出文件的存放路径，此处path代表output的一个属性
        filename: '[name].js',
        sourceMapFilename: '[name].min.map',
        //输出文件的名称
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                // 其中双斜杠/表示正则表达式，\.转移字符'.'，css$适配css字样，表示适配最后是css的文件
                use: ['style-loader','css-loader']
            }
        ]
    },
    plugins: [htmlPlugin],
    //通过plugins节点挂载到plugins数组里面
    //这样webpack运行时会执行这个插件
    //此时生成的index.html也在内存中
    devServer:{
        open:true,
        port:80,
        host:'127.0.0.1'
    }
    //open打包后自己弹出页面
    //port修改端口为80
    //在http协议中，如果端口号是80，则可以被省略
    //host属性表示指定打包时的地址
}